<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档处理--元素删除</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script>
			$(function(){
				//remove() - 删除被选元素（及其子元素）
				$("#btn1").click(function(){
					$("div").remove();//所有的div元素及其子元素被删除
				});
				//remove(筛选条件) - 删除符合筛选条件的元素
				$("#btn2").click(function(){
					$("div").remove(".test");//所有的div元素中引用了class="test"的div被删除
				});
				//empty() - 从被选元素中删除子元素
				$("#btn3").click(function(){
					$("div").empty();//删除div中的所有子元素
				});
			});
		</script>
	</head>
<body>
	<button id="btn1">remove()</button>
	<button id="btn2">remove(筛选条件)</button>
	<button id="btn3">empty()</button>
	<div>
		div1
		<p>div1中的段落1</p>
		<p>div1中的段落2</p>
		<span style="background: lightblue; padding: 10px;">div1中的span</span>
	</div>
	<br/>
	<div class="test">
		div2
	</div>
	<p>p1</p>
</body>
</html>